<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="styles/dzbase.css" />
        <script type="text/javascript" src="scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript" src="scripts/utils.js">
        </script>
        <script type="text/javascript" src="scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript">
            Ext.onReady(function(){
                Ext.QuickTips.init();
                
                // turn on validation errors beside the field globally
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var idValue = getPrarmeterValue(window.location, 'id');
                var startPage = getPrarmeterValue(window.location, 'startPage');
                var techniChartForm = new Ext.FormPanel({
                    fileUpload: true,
                    labelAlign: 'top',
                    labelWidth: 75, // label settings here cascade unless overridden
                    url: 'TechnicChartServlet?action=1',
                    frame: true,
                    reader: new Ext.data.XmlReader({
                        record: 'item'
                    }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'reference',
                        mapping: 'reference'
                    }, {
                        name: 'photoName',
                        mapping: 'photoName'
                    }, {
                        name: 'weight',
                        mapping: 'weight'
                    }, {
                        name: 'diffCoefficient',
                        mapping: 'diffCoefficient'
                    }, {
                        name: 'needle',
                        mapping: 'needle'
                    }, {
                        name: 'cotation',
                        mapping: 'cotation'
                    }, {
                        name: 'comment',
                        mapping: 'comment'
                    }]),
                    title: 'Edit technic chart',
                    bodyStyle: 'padding:5px 5px 5px 5px',
                    defaults: {
                        width: '90%'
                    },
                    
                    items: [{
                        id: 'tcId',
                        name: 'id',
                        xtype: 'hidden'
                    }, {
                        id: 'photoName',
                        name: 'photoName',
                        xtype: 'hidden'
                    }, {
                        fieldLabel: 'Reference',
                        name: 'reference',
                        allowBlank: false,
                        blankText: 'This fieled must be filled out.',
                        xtype: 'textfield',
                        maxLength: 128,
                        maxLengthText: 'The length of the text is too long to store.'
                    }, {
                        layout: 'column',
                        items: [{
                            columnWidth: .5,
                            layout: 'form',
                            items: [{
                                fieldLabel: 'Weight(kg)',
								id: 'weight',
                                name: 'weight',
								width: '80%',
                                allowBlank: false,
                                blankText: 'This fieled must be filled out.',
                                xtype: 'numberfield',
                                maxLength: 64,
                                maxLengthText: 'The length of the text is too long to store.'
                            }, {
                                fieldLabel: 'Needle',
                                width: '80%',
                                name: 'needle',
                                id: 'needle',
								allowBlank: false,
                                blankText: 'This fieled must be filled out.',
                                xtype: 'textfield',
                                maxLength: 64,
                                maxLengthText: 'The length of the text is too long to store.'
                            }]
                        }, {
                            columnWidth: .5,
                            layout: 'form',
                            items: [{
                                fieldLabel: 'Difficulty coefficient',
                                width: '80%',
                                name: 'diffCoefficient',
                                id: 'diffCoefficient',
                                xtype: 'numberfield',
								allowBlank: false,
                                blankText: 'This fieled must be filled out.',
                                maxLength: 64,
                                maxLengthText: 'The length of the text is too long to store.'
                            }, {
                                fieldLabel: 'Cotation',
                                width: '80%',
                                name: 'cotation',
                                id: 'cotation',
                                xtype: 'numberfield',
								allowBlank: false,
                                blankText: 'This fieled must be filled out.',
                                maxLength: 64,
                                maxLengthText: 'The length of the text is too long to store.'
                            }]
                        }]
                    }, {
                        xtype: 'fileuploadfield',
                        id: 'photo',
                        emptyText: 'Please select a photo...',
                        width: '70%',
                        fieldLabel: 'Technic chart',
                        allowBlank: true,
                        name: 'photo',
                        buttonCfg: {
                            text: '',
                            iconCls: 'uploadIcon'
                        }
                    }, {
                        fieldLabel: 'Comment',
                        name: 'comment',
                        allowBlank: true,
                        xtype: 'textarea',
                        maxLength: 512,
                        maxLengthText: 'The length of the text is too long to store.'
                    }],
                    
                    buttons: [{
                        text: 'Save',
                        handler: function(){
                            if (techniChartForm.getForm().isValid()) {
                            
                                techniChartForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                    
                                        messageTip.msg('Tip', 'Save successfully.');
                                        document.getElementById('photo-file').value = null;
                                        techniChartForm.getForm().reset();
                                    },
                                    failure: function(form, action){
                                    
                                        messageTip.msg('Tip', 'Save unsuccessfully.');
                                        
                                    }
                                });
                            }
                        }
                    }, {
                        text: 'Reset',
                        handler: function(){
                            techniChartForm.getForm().reset();
                        }
                    }, {
                        text: 'Cancel',
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'technic_chart_list.html?startPage=' + startPage;
                            }
                            else {
                                window.location = 'technic_chart_list.html';
                            }
                        }
                    }]
                });
                
                techniChartForm.render('technicChartDiv');
                
                new Ext.Resizable('customImg', {
                    wrap: true,
                    pinned: true,
                    dynamic: true,
                    handles: 'all',
                    draggable: true
                });
                
                if (idValue != null) {
                    document.getElementById('tcId').value = idValue;
                    techniChartForm.getForm().load({
                        url: 'TechnicChartServlet?action=3&id=' + idValue,
                        waitMsg: 'Loading...',
                        success: function(form, action){
                            if (document.getElementById('photoName').value != '' && document.getElementById('photoName').value != null) {
                                document.getElementById('customImg').src = '_temp/' + document.getElementById('photoName').value;
                            }
                        }
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="technicChartDiv">
        </div>
        <img id="customImg" src="_temp/noimage.gif" style="position: absolute; left: 40%; width: 250px;"/>
    </body>
</html>